<input type="text" [(ngModel)]="model" (keyup)="selectModality(model)" (click)="showModalitySelector = !showModalitySelector" i18n-placeholder="@@modality" placeholder="Modality"  class="col-md-12 input_field"/>
<div class="modality_selector [hidden]" *ngIf="showModalitySelector"  (clickOutside)="closeFromOutside()" [clickOutsideExceptionClass]="['form-group','more_block','more','input_field', 'no-closing-on-click']">
  <a href="" (click)="showModalitySelector=false" class="close"><i class="glyphicon glyphicon-remove"></i></a>
  <div class="common">
    <a href="" *ngFor="let key of Object.keys(modalities.common)" (click)="$event.preventDefault();selectModality(key)" title="{{modalities.common[key]}}">{{key}}</a>
  </div>
  <button (click)="clear()" class="clear custom_button" i18n="@@Clear">Clear</button>
  <!-- <div class="col-md-12"></div> -->
  <a class="no-closing-on-click" (click)="$event.preventDefault();showMore=!showMore" class="more">
      <span class="no-closing-on-click" *ngIf="!showMore" class="">
          <span class="no-closing-on-click" i18n="@@modality.more">more</span><i class="no-closing-on-click glyphicon glyphicon-triangle-bottom"></i>
      </span>
      <span class="no-closing-on-click" *ngIf="showMore" >
          <span class="no-closing-on-click" i18n="@@modality.less">less</span><i class="no-closing-on-click glyphicon glyphicon-triangle-top"></i>
      </span>
  </a>
  <div class="more_block" *ngIf="showMore">
    <div class="more_buttons_block">
      <a href="" *ngFor="let key of Object.keys(modalities.more)" (click)="$event.preventDefault();selectModality(key)" title="{{modalities.more[key]}}">{{key}}</a>
    </div>
    <div class="form-group">
      <label i18n="@@custom_modality_code">Custom modality code:</label>
      <input [(ngModel)]="model" />
      <button (click)="add()" class="custom_button" i18n="@@Add">Add</button>
    </div>
  </div>
</div>